<!-- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<title>DataSnap REST Project</title>
<!-- EasyUI framework -->
<link rel="stylesheet" href="js/easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" href="js/easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" href="js/easyui-1.3.2/demo/demo.css">
<script src="js/easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="js/easyui-1.3.2/jquery.easyui.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/ServerFunctionInvoker.css" />
<script type="text/javascript" src="js/base64.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/serverfunctionexecutor.js"></script>
<script type="text/javascript" src="js/connection.js"></script>
<script type="text/javascript" src="<#serverfunctionsjs>"></script>
<script type="text/javascript">

var loginRequired = false;

function onLoad()
{
  showTime();
  loginRequired = <#loginRequired>;
  setConnection('<#host>', '<#port>', '<#urlpath>');
  if (loginRequired)
  {
    showLogin(true);
  }
  else
  {
    showLogin(false);
  }
}

function onLogin()
{
  if (loginRequired)
  {
    if (AdminInst == null)
    {
        if (!setCredentials(document.getElementById('userField').value, document.getElementById('passwrdField').value))
        {
          loginCorrect(false);
          return;
        }
        else
        {
          loginCorrect(true);
          showLogin(false);
        }
    }
  }
  else
    showLogin(false);
}

function loginCorrect(isCorrect)
{
  var errorDiv = document.getElementById('loginError');
  if ( errorDiv != null )
  {
    errorDiv.innerHTML= isCorrect ? "" : "login incorrect";
  }
}

function showLogin(show)
{
  var loginDiv = document.getElementById('logindiv');
  var contentDiv = document.getElementById('contentdiv');
  if (show)
  {
      // show div
      loginDiv.style.display="block";
      contentDiv.style.display="none";
  }
  else
  {
      // show div
      loginDiv.style.display="none";
      contentDiv.style.display="block";
  }
}

function showTime()
{
  var d = new Date();
  var h = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  var timeElement = document.getElementById('timeElement');
  if ( timeElement != null )
  {
    timeElement.innerText=
      (h <= 9 ? "0" : "") + h + ":" +
      (m <= 9 ? "0" : "") + m + ":" +
      (s <= 9 ? "0" : "") + s;
  }
}

function serverMethods()
{
  return new <#classname>(connectionInfo);
}

function onReverseStringClick()
{
  var fieldValue = ''
  // use GET
  var valueField = document.getElementById('valueField');
  fieldValue = valueField.value;
  var s = serverMethods().ReverseString(fieldValue);
  valueField.value = s.result;
  // use Async POST
  function xhrCallback(returnObject)
  {
    if (returnObject != null && returnObject.result != null && isArray(returnObject.result))
	  {
	  valueField.value = returnObject.result;
	  console.log('DataSnap aync result : ' + valueField.value);
	  } else { console.log('DataSnap async response : ' + returnObject); }
  }
  var xhrAsync = new ServerFunctionExecutor("TServerMethods1",connectionInfo);
  xhrAsync.executeMethod('"ReverseString"', "POST", [fieldValue], xhrCallback);
  // use Sync POST
  var xhrSync = new ServerFunctionExecutor("TServerMethods1",connectionInfo);
  var resultObject = xhrSync.executeMethod('"ReverseString"', "POST", [fieldValue]);
  if (resultObject != null && resultObject.result != null && isArray(resultObject.result))
    console.log('DataSnap sync result : ' + resultObject.result);
  else
    console.log('DataSnap sync response : ' + resultObject);
}

function onVanillaJSReverseStringClick()
{
  function fetchXMLHttpRequest() {
    if (typeof XMLHttpRequest !== "undefined")
      return new XMLHttpRequest();
    else if (ActiveXObject)
    {
      var aVersions = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
      for (var i = 0; i < aVersions.length; i++)
      {
        try
        {
          return new ActiveXObject(aVersions[i]);
          break;
        } catch (e) {return new Error("This browser does not support XMLHttpRequest.");}
      }
    }
  }
  var valueField = document.getElementById('valueField_vjs');
  var url = null;
  // use GET
  url = "http://<#host>:<#port>/datasnap/rest/<#classname>/ReverseString/" + valueField.value
  var xhrGET = fetchXMLHttpRequest();
  xhrGET.open("GET", url, true);
  xhrGET.onreadystatechange = function() {
    if (xhrGET.readyState == 4)
    {
      var jsonResult = JSON.parse(xhrGET.responseText);
      valueField.value = jsonResult.result;
      console.log("GET fetch value : " + jsonResult.result);
    }
  };
  xhrGET.send();
  // use POST
  var params = JSON.stringify({"_parameters":[valueField.value]});
  url = 'http://<#host>:<#port>/datasnap/rest/<#classname>/"ReverseString"/';
  var xhrPOST = fetchXMLHttpRequest();
  xhrPOST.open("POST", url, true);
  xhrPOST.onreadystatechange = function() {
    if (xhrPOST.readyState == 4)
    {
      var jsonResult = JSON.parse(xhrPOST.responseText);
      valueField.value = jsonResult.result;
      console.log("POST fetch value : " + jsonResult.result);
    }
  };
  xhrPOST.send(params);
}

function onJQueryReverseStringClick()
{
  var valueField = document.getElementById('valueField_jq');
  // use GET
  $.ajax({
    type:"GET",
    url:"http://<#host>:<#port>/datasnap/rest/TServerMethods1/ReverseString/"+valueField.value,
    async:"true",
    dataType:"json",
    success:function(jsonResult){
      valueField.value = jsonResult.result;
      console.log("GET fetch value : " + jsonResult.result);
    }
  });
  // use POST
  $.ajax({
    type:"POST",
    url:'http://<#host>:<#port>/datasnap/rest/TServerMethods1/"ReverseString"/',
    data:JSON.stringify({"_parameters":[valueField.value]}),
    async:"true",
    dataType:"json",
    success:function(jsonResult){
      valueField.value = jsonResult.result;
      console.log("POST fetch value : " + jsonResult.result);
    }
  });
}
</script>
</head>
<body onload="onLoad()">
  <#serverfunctioninvoker>
    <h1>DataSnap REST Project</h1>
    <div> Page loaded at <span id="timeElement"></span>
    </div>
    <div id="logindiv" style="display:none">
      <p class="divlabel">Login</p><br />
      <form onsubmit="onLogin(); return false;">
        <table class="authtable">
          <tr>
            <td>User Name:</td>
            <td><input id="userField" class="loginField" type="text" /></td>
          </tr>
          <tr>
            <td>Password:</td>
            <td><input id="passwrdField" class="loginField" type="password" /></td>
          </tr>
        </table>
        <div id="loginError" class="errorMsg"></div><br /><input id="loginButton" type="submit" value="LOG IN" />
      </form>
    </div>
    <div id="contentdiv" class="contentdiv" style="display:none">
      <table>
        <tr>
          <td><input id="valueField_vjs" class="loginField" type="text" value="A B C" /></td>
          <td>
            <a
              id="btn"
              href="javascript:onVanillaJSReverseStringClick();"
              class="easyui-linkbutton"
              data-options="iconCls:'icon-search'"
            >
              ReverseString for VanillaJS
            </a>
          </td>
        </tr>
      </table>

      <table>
        <tr>
          <td><input id="valueField_jq" class="loginField" type="text" value="A B C" /></td>
          <td>
            <a
              id="btn"
              href="javascript:onJQueryReverseStringClick();"
              class="easyui-linkbutton"
              data-options="iconCls:'icon-search'"
            >
              ReverseString for jQuery
            </a>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td><input id="valueField" class="loginField" type="text" value="A B C" /></td>
          <td>
            <a
              id="btn"
              href="javascript:onReverseStringClick();"
              class="easyui-linkbutton"
              data-options="iconCls:'icon-search'"
            >
              ReverseString for JavaScript API
            </a>
          </td>
        </tr>
      </table>
    </div>
</body>
</html>
